<!-- directive:title 改变checkbox的model格式  -->
<!-- directive:breadcrumb checkboxlist -->
<div class='panel-body'>
    <p>多选框输入的值处理得并不好，通过这个指令，可以方便的将多选框的值直接组织成数组</p>
    <p>这个指令可以改变一组checkbox的model格式，提交的时候格式为[x,y,z,...]</p>
    <div>
        <h3>普通使用</h3>
        <p>
            <label class="checkbox-inline i-checks">
                <input type="checkbox" ng-checked="user1.roles.length==4" ng-click="doAll()">
                <i></i>总控制
            </label>
            <label ng-repeat="row in roles1" class="checkbox-inline i-checks">
                <input type="checkbox" checklist-model="user1.roles" checklist-value="row">
                <i></i>{{row}}
            </label>
        </p>
        <script type="text/xianjs" ui-bs>
            <label class="checkbox-inline i-checks">
                <input type="checkbox" ng-checked="user1.roles.length==4" ng-click="doAll()">
                <i></i>总控制
            </label>
            <label ng-repeat="row in roles1" class="checkbox-inline i-checks">
                <input type="checkbox" checklist-model="user1.roles" checklist-value="row">
                <i></i>{{row}}
            </label>
        </script>
        <p>{{user.roles}}</p>
        <button class="btn btn-danger" ng-click="checkAll()" style="margin-right: 10px">Check all</button>
        <button class="btn btn-danger" ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
        <hr>
    </div>
    <div>
        <h3>键值对使用</h3>
        <p>
            <label ng-repeat="row in roles2" class="checkbox-inline i-checks">
                <input type="checkbox" checklist-model="user2.roles" checklist-value="row.id">
                <i></i>{{row.text}}
            </label>
        </p>
        <script type="text/xianjs" ui-bs>
            <label ng-repeat="row in roles2" class="checkbox-inline i-checks">
                <input type="checkbox" checklist-model="user2.roles" checklist-value="row.id">
                <i></i>{{row.text}}
            </label>
        </script>
        <p>{{user.roles}}</p>
        <hr>
    </div>
    <div>
        <h3>自定义保存项</h3>
        <p>
            <label ng-repeat="row in roles3" class="checkbox-inline i-checks">
                <input type="checkbox" data-checklist-model="user3.roles" data-checklist-value="row">
                <i></i>{{row.text}}
            </label>
        </p>
        <p>{{user.roles}}</p>
        <hr>
    </div>
</div>
